<extend name='./Base' />
<block name='admin-content-body'>

<div class="admin-content-body">
      <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">文章列表</strong> / <small>List</small></div>
      </div>

      <hr>

      <div class="am-g">
      <form action="{:U('__ACTION__')}" method="get">
        <div class="am-u-sm-12 am-u-md-3">
          <div class="am-form-group">
            <select data-am-selected="{btnSize: 'sm'}" name="categoryID">
              <option value=" ">所有类别</option>
              <foreach name='categories' item='v'>
              <option value="{$v['id']}" <if condition="I('get.categoryID') eq $v['id']">selected='selected'</if>>{$v['category']}</option>
              </foreach>
            </select>
          </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" name="start_t" placeholder="开始日期" data-am-datepicker readonly value="<?php echo $_GET['start_t'];?>">
          </div>
        </div>

        <div class="am-u-sm-12 am-u-md-3">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" name="end_t" placeholder="结束日期" data-am-datepicker readonly value="<?php echo $_GET['end_t'];?>">
          </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" name="title" value="<?php echo $_GET['title'];?>">
          <span class="am-input-group-btn">
            <button type="submit" class="am-btn am-btn-default" type="button">搜索</button>
          </span>
          </div>
        </div>
        </form>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12">
            <table class="am-table am-table-striped am-table-hover">
              <thead>
              <tr>
                <th class="table-id">ID</th>
                <th class="table-title">标题</th>
                <th class="table-title">封面</th>
                <th class="table-type">分类</th>
                <th class="table-type">查看</th>
                <th class="table-type">点赞</th>
                <th class="table-date am-hide-sm-only">创建日期</th>
                <th class="table-date am-hide-sm-only">修改日期</th>
                <th class="table-set">操作</th>
              </tr>
              </thead>
              <tbody>
                <foreach name="articles" item='a'>
              <tr id="{$a['id']}_article">
                <td>{$a['id']}</td>
                <td><a href="{:U('/home/index/article/id/'.$a['id'])}" target="__blank">{$a['title']|mb_substr=###,0,13,'utf-8'}...</a></td>
                <td>
                <empty name="a.cover"> 
                <empty name="a.banner"> 
                <button class="am-btn am-btn-success"
                          data-am-popover="{content: '<img src=\'__PUBLIC__/static/admin/i/uploadimgbg.png\' style=\'max-width:300px\'>', trigger: 'hover focus'}">
                    查看
                  </button>
                <else />
                <button class="am-btn am-btn-success"
                          data-am-popover="{content: '<img src=\'{$a['banner']}\' style=\'max-width:300px\'>', trigger: 'hover focus'}">
                    查看
                  </button>
                </empty>
              <else />
                <button class="am-btn am-btn-success"
                          data-am-popover="{content: '<img src=\'{$a['cover']}\'>', trigger: 'hover focus'}">
                    查看
                  </button>
              </empty> 
                </td>
                <td>{$a['category']}</td>
                <td>{$a['views']}</td>
                <td>{$a['likes']}</td>
                <td class="am-hide-sm-only">{$a['create_time']|date='Y-m-d H:i:s',###}</td>
                <td class="am-hide-sm-only">{$a['update_time']|date='Y-m-d H:i:s',###}</td>
                <td>
                <div class="am-dropdown" data-am-dropdown>
                  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>更多操作 <span class="am-icon-caret-down"></span></button>
                  <ul class="am-dropdown-content">
                    <li><a href="{:U('__CONTROLLER__/edit/id/'.$a['id'])}" class="am-btn am-btn-primary am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</a></li>
                    <li><a onclick="deletea({$a['id']})" class="am-btn am-btn-danger am-btn-xs am-text-secondary"><span class="am-icon-trash-o"></span> 回收站</a></li>
                    <li><a onclick="getComments({$a['id']})" class="am-btn am-btn-success am-btn-xs am-text-secondary"><span class="am-icon-comments"></span> 查看评论</a></li>
                  </ul>
                </div>
                </td>
              </tr>
             </foreach>
              </tbody>
            </table>
            <!-- <div class="am-cf"> -->
              <div class="am-fr">
                {$pager}
              </div>
            <!-- </div> -->
        </div>

      </div>
    </div>

</block>

<block name="js">
  <script type="text/javascript">
   function deletea(id) {
      layer.confirm('确定要加入回收站？', {
        btn: ['确定','取消']
      },function(){
        $.post('{:U("articles/addrecycle")}',{'id':id},function(res){
          if(res.status){
            $("#"+id+"_article").remove();
            layer.msg(res.msg);
          }else{
            layer.alert(res.msg,{icon:5});
          }
        });
    },function(){})
   }
   function getDateTime(timestamp) {
      var date = new Date(timestamp*1000);
      Y = date.getFullYear() + '-';
      M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      D = (date.getDate()<10?'0' +date.getDate():date.getDate())+ ' ';
      h = (date.getHours()<10?'0'+date.getHours():date.getHours()) + ':';
      m = (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()) + ':';
      s = (date.getSeconds()<10?'0'+date.getSeconds():date.getMinutes());
      return Y+M+D+h+m+s;
    }
   function getComments(id){
      $.post('{:U("comments/view")}',{'aid':id},function(res){
          if(res.comments.length>0){
            var html=avatar=str='';
            html+='<div class="am-panel-bd am-collapse am-in am-cf" id="collapse-panel-3">';
              html+='<ul class="am-comments-list admin-content-comment">';
            $.each(res.comments,function(i){
              if(res.comments[i].to!=0){
                /*有回复的人*/
                str='(我)回复'+res.comments[i].replay;
                avatar='__PUBLIC__/static/home/images/readerAvatar.png';
              }else{
                str='';
                <if condition="F('webSet')['qqLogin'] eq 1">
                  if(res.comments[i].avatar!=null){
                    avatar=res.comments[i].avatar;
                  }else{
                    avatar='__PUBLIC__/static/home/images/avatars/'+parseInt(res.comments[i].id)%10+'.jpg';
                  }
                <else />
                  avatar='__PUBLIC__/static/home/images/avatars/'+parseInt(res.comments[i].id)%10+'.jpg';
                </if>
              }
              
              html+='<li class="am-comment" id="message_'+res.comments[i].id+'">';
              html+='<a href="#"><img src="'+avatar+'" alt="" class="am-comment-avatar" width="48" height="48"></a>';
              html+='<div class="am-comment-main"><header class="am-comment-hd">';

              html+='<div class="am-comment-meta"><a href="#" class="am-comment-author">'+res.comments[i].nickname+str+'</a> 评论于 <time>'+getDateTime(res.comments[i].create_time)+'</time>&nbsp;&nbsp;&nbsp;来自&nbsp;'+res.comments[i].systemos+'的&nbsp;'+res.comments[i].browser+'浏览器</div>';
              html+='</header><div class="am-comment-bd"><p>'+res.comments[i].comment+'</p></div><div class="am-comment-footer am-comment-actions" style="cursor: pointer;">\
              <span onclick=\'replay('+res.comments[i].id+',"'+res.comments[i].nickname+'",'+id+')\'><i class="am-icon-reply"></i>回复</span><div style="float: right;color: red;cursor: pointer;"><span onclick="deletec('+res.comments[i].id+')"><i class="am-icon-trash-o"></i>删除</span></div></div></div></li>';
            });
            html+='</ul></div>';

            layer.open({
              type: 1,
              skin: 'layui-layer-rim', //加上边框
              area: ['900px', '500px'], //宽高
              content: html
            });
          }else{
            layer.alert('没有评论啊',{icon:5});
          }
        });
   }

   function replay(id,nickname,aid){
    layer.prompt({title: '回复'+nickname, formType: 2}, function(text, index){
      layer.close(index);
        $.post('{:U("comments/replay")}',{'comment':text,'id':id,'article_id':aid},function(res){
          if(res.status){
            layer.msg(res.msg);
          }else{
            layer.alert(res.msg);
          }
        });
    });
  }
   function deletec(id) {
      layer.confirm('确定要删除？不可恢复', {
        btn: ['确定','取消']
      },function(){
        $.post('{:U("comments/deleteComment")}',{'id':id,'delete':1},function(res){
          if(res.status){
            $("#message_"+id).remove();
            layer.msg(res.msg);
          }else{
            layer.alert(res.msg,{icon:5});
          }
        });
    },function(){})
   }
  </script>
</block>